import React from 'react'
import styles from './index.less'
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { loginApi } from '@/api/login';
import { encrypt, setToken} from '@/utils'
import { history } from 'umi'

export default function Login() {

  /** 登录的接口 */
  const onFinish = async (values) => {
    const obj = {
      userAccount : values.username,
      userPwd: encrypt(values.password)
    }
    const res = await loginApi({...obj})
    if(res.data.code === 200) {
      message.success(res.data.message)
      setToken(res.data.data)
      history.push('/')
    } else{
      message.error('账号或者密码有误!')
    }
  };

  return (
    <div className={styles.login}>
      <div className={styles.login_context}>
        <h2 style={{ fontWeight: 700 }}>秦学后台管理</h2>
        <Form
            autoComplete="off"
            initialValues={{ username: '18979307261', password: 'zhhdzs129'  }}
            name="basic"
            onFinish={onFinish}
            wrapperCol={{ span: 24 }}
        >
          <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input
                placeholder="请输入账号"
                prefix={<UserOutlined />}
                style={{
                  height: 40,
                  marginTop: 15,
                }}
            />
          </Form.Item>

          <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input
                placeholder="请输入登录密码"
                prefix={<LockOutlined />}
                style={{
                  height: 40,
                  marginTop: 10
                }}
                type="password"
            />
          </Form.Item>
          <Button block
              htmlType="submit"
              style={{
                height: 45,
                backgroundColor: '#1a267b',
                color: '#fff',
                marginTop: 30,
                borderRadius: 5
              }}
          >登录</Button>
        </Form>
        <p style={{ fontSize: 12, color: '#a4abdf', marginTop: 10}}>使用手机小程序提示的账号密码登录</p>
      </div>
    </div>
  )
}
